<template>
  <div class="box" :id="EchartId"></div>
</template>

<script>
import uuidv1 from 'uuid/v1';
import { buildOption, buildTitle, buildGrid, buildXAxis, buildYAxis, buildPieSeries, buildLineSeries, buildBarSeries, buildSeries } from './buildEChartOption';
import { buildDateAxis } from '@/unit/tool';

export default {
  name: 'normalBar',
  props: {
    barData: Object,
  },
  data() {
    return {
      myChart: '',
      EchartId: '',
    };
  },
  watch: {
    barData: function(newVal) {
      let { lists, ...restOption } = newVal;
      if (lists.length > 0) {
        let barSeries = buildBarSeries(lists);
        let seriesLists = buildSeries(barSeries);
        this.myChart.setOption({
          ...restOption,
          // xAxis: {
          //   data: xAxisData,
          // },
          series: seriesLists,
        });
      }
    },
  },
  methods: {
    init_chart() {
      // 绘制图表
      let myChart = this.myChart;

      let option = buildOption({
        grid: buildGrid(),
        // xAxis: buildXAxis({
        //   type: 'category',
        //   boundaryGap: true,
        // }),
        // yAxis: buildYAxis(),
      });

      myChart.setOption(option);
    },
  },
  created() {
    this.EchartId = uuidv1(); //获取随机id
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = this.$echarts.init(document.getElementById(this.EchartId));
    this.init_chart();
  },
  destroyed() {
    this.myChart.clear();
  },
};
</script>

<style scoped="scoped">
.box {
  width: 100%;
  height: 100%;
  background: transparent;
}
</style>
